<%--
  Created by IntelliJ IDEA.
  User: lxm_5678
  Date: 2016/1/14
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--<script src="${ctx}/assets/echarts3.0/dist/echarts.min.js" type="text/javascript"></script>--%>

    
</head>
<body style="">
<div class="content-wrapper">
    <h3>纳税人需求及服务资源布局投放分析</h3>
    <div class="panel panel-primary">
        <div class="panel-heading">纳税人分布信息</div>
        <div class="panel-body " align="center">
            <div id="main" align="" style="width: 800px;height:350px;"></div>
        </div>
    </div>


    <div class="panel panel-primary">
        <div class="panel-heading">服务大厅分布信息</div>
        <div class="panel-body ">
            <div class="row">
                <div class="col-sm-5">
                    <div class="panel panel-default">
                        <%--<div class="panel-heading">服务大厅分布信息</div>--%>
                        <div class="panel-body">
                            <div id="pieMain" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="panel panel-default">
                        <%--<div class="panel-heading">服务大厅分布信息</div>--%>
                        <div class="panel-body">
                            <div id="barMain" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>






            <%--<div class="table-responsive table-bordered">
                <table id="datatable2" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th style="text-align: center">地区</th>
                        <th style="text-align: center">服务大厅名称</th>
                        <th style="text-align: center">服务窗口数量</th>
                        <th style="text-align: center" colspan="5">一体机数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="gradeX ">
                        <td style="text-align: center">南京</td>
                        <td style="text-align: center">白下区服务厅</td>
                        <td style="text-align: center">5</td>
                        <td style="text-align: center">25</td>
                    </tr>
                    <tr class="gradeC">
                        <td style="text-align: center">南京</td>
                        <td style="text-align: center">秦淮区服务厅</td>
                        <td style="text-align: center">4</td>
                    </tr>
                    <tr class="gradeX ">
                        <td style="text-align: center">南京</td>
                        <td style="text-align: center">玄武区服务厅</td>
                        <td style="text-align: center">6</td>
                    </tr>
                    </tbody>
                </table>
            </div>--%>
        </div>
    </div>
</div>
<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '${ctx}/assets/echarts/build/dist'
            }
        });
        require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/map',
                    'echarts/chart/line',
                    'echarts/chart/pie'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var my_Chart = ec.init(document.getElementById('main'));
                    var my_option = {
                        timeline : {
                            data : [ '2010-01-01', '2011-02-01', '2012-03-01',
                                '2013-04-01', '2014-05-01', '2015-06-01'],
                            label : {
                                formatter : function(s) {
                                    return s.slice(0, 4) + '年';
                                }
                            },
                            autoPlay : true,
                            playInterval : 1000
                        },
                        options:[
                            {
                                tooltip : {
                                    trigger: 'axis'
                                },
                                /*toolbox: {
                                 show : true,
                                 feature : {
                                 mark : {show: true},
                                 dataView : {show: true, readOnly: false},
                                 magicType: {show: true, type: ['line', 'bar']},
                                 restore : {show: true},
                                 saveAsImage : {show: true}
                                 }
                                 },*/
                                calculable : true,
                                legend: {
                                    data:['纳税人数量'/*,'一体机数量'*/]
                                },
                                xAxis : [
                                    {
                                        type : 'category',
                                        data : ['南京市','镇江市','常州市','无锡市','苏州市','南通市','泰州市','扬州市','盐城市','淮安市','宿迁市','徐州市','连云港市']
                                    }
                                ],
                                yAxis : [
                                    {
                                        type : 'value',
                                        name : '纳税人',
                                        axisLabel : {
                                            formatter: '{value} 人'
                                        }
                                    }/*,
                                    {
                                        type : 'value',
                                        name : '一体机',
                                        axisLabel : {
                                            formatter: '{value} 台'
                                        }
                                    }*/
                                ],
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[172000, 137831, 142048, 118462, 132894,112037, 148962, 122637, 117824, 142835, 102375, 108456,139472,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[34,32, 32, 20, 28, 20, 34, 28, 45, 30, 20, 31,34,120]
                                    }*/
                                ]},{
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[139472, 108456, 102375, 142835, 117824,112037, 122637, 148962, 132894, 142835, 102375, 137831,172000,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[50,30, 32, 45, 28, 20, 34, 28, 49, 42, 20, 31,28,120]
                                    }*/
                                ]},{
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[172000, 137831, 142048, 118462, 132894,112037, 148962, 122637, 117824, 142835, 102375, 108456,139472,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[50,30, 32, 45, 28, 20, 34, 28, 49, 42, 20, 31,28,120]
                                    }*/
                                ]},{
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[142048, 132894, 142048, 118462, 172000,122637, 148962, 137831, 117824, 108456, 102375, 108456,139472,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[52,34, 32, 45, 28, 23, 34, 22, 41, 46, 25, 33,22,120]
                                    }*/
                                ]},{
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[108456, 137831, 142835, 118462, 132894,112037, 148962, 122637, 108456, 142835, 102375, 108456,139472,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[40,40, 42, 25, 28, 20, 34, 28, 29, 32, 30, 31,28,120]
                                    }*/
                                ]},{
                                series : [

                                    {
                                        name:'纳税人数量',
                                        type:'bar',
                                        data:[172000, 137831, 142048, 118462, 132894,112037, 148962, 122637, 117824, 142835, 102375, 108456,139472,300000]
                                    }/*,
                                    {
                                        name:'一体机数量',
                                        type:'bar',
                                        yAxisIndex: 1,
                                        data:[30,35, 22, 35, 21, 27, 44, 38, 42, 32, 10, 21,22,120]
                                    }*/
                                ]
                            }

                        ]



                    };
                    my_Chart.setOption(my_option);


                    // 基于准备好的dom，初始化echarts图表
                    var pie_Chart = ec.init(document.getElementById('pieMain'));
                    var pie_option = {
                        title : {
                            text: '服务大厅分布',
                            //subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        /*legend: {
                         orient : 'vertical',
                         x : 'left',
                         data:['南京市','镇江市','常州市','无锡市','苏州市','南通市','泰州市','扬州市','盐城市','淮安市','宿迁市','徐州市','连云港市']
                         },*/
                        calculable : true,
                        series : [
                            {
                                name:'访问来源',
                                type:'pie',
                                radius:100,
                                data:[
                                    {name: '南京市', value: 30},
                                    {name: '镇江市', value: 25},
                                    {name: '常州市', value: 25},
                                    {name: '无锡市', value: 35},
                                    {name: '苏州市', value: 27},
                                    {name: '南通市', value: 31},
                                    {name: '泰州市', value: 29},
                                    {name: '扬州市', value: 24},
                                    {name: '盐城市', value: 32},
                                    {name: '淮安市', value: 19},
                                    {name: '宿迁市', value: 28},
                                    {name: '徐州市', value: 20},
                                    {name: '连云港市', value: 31}
                                ]
                            }
                        ]
                    };
                    pie_Chart.setOption(pie_option);


                    // 基于准备好的dom，初始化echarts图表
                    var bar_Chart = ec.init(document.getElementById('barMain'));
                    var bar_option = {
                        title:{
                            text:'服务大厅',
                            x:'center',
                            subtext: '窗口总数:23     一体机总数：15'
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            x:'right',
                            data:['窗口数量','一体机数量']
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['服务大厅一','服务大厅二','服务大厅三','服务大厅四','服务大厅五','其他'],
                                axisLabel : {
                                    rotate: -45 //设置X轴字体旋转， 正直为逆时针，负值为顺时针
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'窗口数量',
                                type:'bar',
                                stack: '服务厅',
                                data:[4, 5, 3, 4, 5, 2,10]
                            },
                            {
                                name:'一体机数量',
                                type:'bar',
                                stack: '服务厅',
                                data:[2, 3, 1, 2, 3, 4,5]
                            }
                        ]
                    };
                    bar_Chart.setOption(bar_option);
                }
        );
    </script>
</body>
</html>
